<template>
  <div class="container2 scrub">
      <div class="title">
           <el-input class="input" suffix-icon="el-icon-search" placeholder="想要查找什么…" v-model="input"/>
           <i class="el-icon-close" style="margin-right: 1em; margin-top: 0.8em;" @click="$emit('searchClose')"/>
      </div>
      <div class="content">
          <div class="sub-content">
              <div>文章</div>
          </div>
          <el-divider></el-divider>
          <div>
              <div>页面</div>
          </div>
          <el-divider></el-divider>
          <div>
              <div>分类</div>
          </div>
          <el-divider></el-divider>
          <div>
              <div>标签</div>
          </div>
      </div>
  </div>
</template>
<script>

export default {
  components: {
  },
  name: '',
  data() {
    return {
      input: ''
    }
  },
  methods: {
  }
}

</script>
<style scoped>
.container2 {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    width: 20em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}
.input {
    width: 20em;
}
.title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.3em;
}
.content {
    height: calc(100% - 3em);
    overflow-y: scroll;
}
.sub-content {
   
}
</style>